nshop-front-m/src/app/(public)/product/[...urlProduct]/page.tsx

import { notFound } from "next/navigation";
import { Suspense } from "react";
// import clsx from "clsx";
// import type { ProductReviewList } from "@/types/products/productDetail";
// import { getProductReviews } from "@utils/hooks/getProductReviews";
// import { restApiFetch } from "@utils/bagisto/index";
import {
  ProductDetailSkeleton,
  RelatedProductSkeleton,
} from "@/components/common/skeleton/ProductSkeleton";
import { BASE_SCHEMA_URL, PRODUCT_TYPE } from "@/utils/constants";
import { GET_PRODUCT_BY_URL_KEY } from "@/graphql";
import {serverGraphqlFetch} from "@utils/bagisto/index";
import {
  ProductOption,
  SingleProductResponse,
  ProductMediaType,
} from "@components/catalog/type";
import { RelatedProductsSection } from "@components/catalog/product/RelatedProductsSection";
import { HeroCarouselShimmer } from "@components/common/slider";
import { ProductMedia } from "@/app/(public)/product/_components/ProductMedia";
import { ProductInformation } from "@/app/(public)/product/_components/ProductInformation";
// import { ProductShortDescription } from "@/app/(public)/product/_components/ProductShortDescription";
import { ProductDetail } from "@/app/(public)/product/_components/ProductDetail";
import ProductDescription from "../_components/ProductDescription";
import SwitchButton from "../_components/SwitchButton";
import ShopServicePanel from "../_components/ShopServicePanel";
import Recommend from "../_components/youmaylike/Recommend"
import { formatFlexibleVariants } from "@/utils/variantTools";

// export const dynamic = 'auto'
// // 'auto' | 'force-dynamic' | 'error' | 'force-static'
export const dynamic = "force-dynamic";

//动态路由中的参数 -- params
export default async function ProductPage({
  params,
}: {
  params: Promise<{ urlProduct: string[] }>;
  searchParams: Promise<{ type: string }>;
}) {
  const { urlProduct } = await params;
  const fullPath = urlProduct.join("/");
  
  const resProductData = await serverGraphqlFetch<SingleProductResponse,{urlKey: string;}>({
      // urlKey, // 产品名称
      query: GET_PRODUCT_BY_URL_KEY, // gql查询语句
      variables:{ 
        urlKey: fullPath 
      },
      takeAuthorization: false,
      
  });
  console.log("productCustomerFeatures----------------------",resProductData);
  const product = resProductData.data?.product;
  const fetchProductError = resProductData.error;
  if (fetchProductError && fetchProductError.extensions.status === 404) return notFound();
  if(!product) throw new Error(fetchProductError?.message ?? 'Get product data failed');
  // const allReviews: ProductReviewList = await getProductReviews(
  //   String(product._id),
  // );
  // 3792
  // const res = await restApiFetch({
  // api: `/shop/products/${3792}/reviews?page=1&per_page=10&has_images=0&sort=all`,
  // method: "GET",
// });
// const allReviews = res?.body?.data;

  const questionTotal = 73;
  // const imageUrl = getImageUrl(product?.baseImageUrl, baseUrl, NOT_IMAGE);

  // JSON-LD数据格式，便于搜索引擎识别页面信息，利于seo
  const productJsonLd = {
    "@context": BASE_SCHEMA_URL,
    "@type": PRODUCT_TYPE,
    name: product?.name,
    description: product?.description,
    sku: product?.sku,
  };

  const mediaImgs = (product?.images?.edges ?? []).map(
    (edge: { node: ProductMediaType }) => {
      return edge.node;
    },
  );
  const productOptions: ProductOption[] = product?.productOptions
    ? JSON.parse(product?.productOptions)
    : [];

  const flexibleVariants = formatFlexibleVariants(product?.flexibleVariants);

  // const reviews = Array.isArray(product?.reviews?.edges)
  // ? product?.reviews.edges.map((e) => e.node)
  // : [];

  // const VariantImages = isArray(product?.variants?.edges)
  //   ? product?.variants.edges.map(
  //       (edge: { node: ProductVariantNode }) => edge.node,
  //     )
  //   : [];

  return (
    <>
      <script //SEO
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(productJsonLd),
        }}
        type="application/ld+json"
      />
      <div className="w-full">
        <Suspense fallback={<HeroCarouselShimmer />}>
          <ProductMedia mediaData={mediaImgs} />
        </Suspense>
      </div>

      <div className="">
        <Suspense fallback={<ProductDetailSkeleton />}>
          <ProductInformation
            key={product._id}
            productId={product._id}
            name={product?.name || ""}
            productOptions={productOptions}
            flexibleVariants={flexibleVariants}
            isSaleable={product.isSaleable}
            shortDescription={product.shortDescription || ""}
          />
          <ShopServicePanel />
          {/* <ProductShortDescription
            shortDescription={product.shortDescription || ""}
          /> */}
         <ProductDescription   htmlString={product?.feature || ""} />
          <SwitchButton
            productId={"3792"} //|| String(product._id)
            // reviewList={allReviews}
            // reviewTotal={allReviews.length}
            questionTotal={questionTotal}
            questionList={["aaa"]}
          />
          <ProductDetail detail={product.description || ""} />
          {/* <ProductReviewSection reviews={allReviews} productId={String(product._id)} /> */}
        </Suspense>
        <Recommend/>
      </div>
        
      <Suspense fallback={<RelatedProductSkeleton />}>
        <RelatedProductsSection fullPath={fullPath} />
      </Suspense>
    </>
  );
}